import React from 'react'
import styles from './style.less'
import 'static/animation.css'

export default class Popup extends React.Component {

	constructor(props) {
		super(props)
		this.popupClose = this.popupClose.bind(this)
	}

	popupClose(){
		this.refs.popup.style.display = 'none'
	}


	render() {
		if (this.props.visible) {
			this.refs.popup.style.display = 'block'
		}
		return (
			<div>
				<div className={styles.popup} ref='popup'>
					<div className={styles.popupMain}>
						<div className={styles.popupContent} id='zoomInDown'>
							<div className={styles.popupTitle}>{this.props.title}</div>
						    <section className={styles.contentBox}>
						    	{this.props.content}
						    </section>
						    <div className={styles.popupBtn}>
						        <div className={styles.popupClose} onClick={this.popupClose}>{this.props.close}</div>
						    </div>
						</div>
					</div>
				</div>
			</div>
		)
	}
}